<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>看漫后台-章节编辑</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="Keywords" content=""/>
    <meta name="description" content=""/>
    <link type="image/x-icon" href="" rel="shortcut icon">
    <!-- clip 样式依赖 -->
    <link rel="stylesheet" href="plug/comic-clip/plug/bootstrap.css">
    <link rel="stylesheet" href="plug/comic-clip/plug//cropper.css">
    <link rel="stylesheet" href="plug/comic-clip/index.css">
    <!-- clip 样式依赖 END -->
    <!-- colorpicker 样式依赖 -->
    <link rel="stylesheet" href="plug/spectrum/spectrum.css">
    <!-- colorpicker 样式依赖 END -->
    <!-- 页面样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 页面样式 END -->
    <style>
        /* .dbtn {display: block;margin: 80px auto 0;border-radius: 8px;height:120px;width: 360px;background-color: #ff6a48;color: #fff;text-align: center;line-height: 120px;font-size: 28px;}
        .dbtn:active {background-color: #d0573c;} */
    </style>
</head>
<body>
<div class="km-view-main">
    <div class="km-view-header">
        <h1 class="title">编辑章节</h1>
        <div class="menu">
            <a href="#" class="link">返回上一级</a>
        </div>
    </div>
    <div class="km-view-body">
        <div class="chapter-edit-main">
            <div class="chapter-edit-block">
                <h2 class="chapter-edit-title">章节看点</h2>
                <div class="chapter-edit-form">
                    <h3 class="name">看点内容：</h3>
                    <div class="content">
                        <input id="js_article_input" class="full-input" type="text" placeholder="限20个字以内">
                    </div>
                </div>
                <div class="chapter-edit-form">
                    <h3 class="name">选择字体颜色：</h3>
                    <div id="js_font_row" class="content">
                        <ul class="color-list">
                            <li class="js_color_box color-box" data-color='ffffff'></li>
                            <li class="js_color_box color-box" data-color='abcabc'></li>
                            <li class="js_color_box color-box" data-color='bcabca'></li>
                            <li class="js_color_box color-box" data-color='cbacba'></li>
                            <li class="js_color_box color-box" data-color='eeeeee'></li>
                            <li class="js_color_box color-box" data-color='356356'></li>
                            <li class="js_color_box color-box" data-color='653653'></li>
                        </ul>
                        <div class="color-edit">
                            <label for="js_font_input">#</label>
                            <input id="js_font_input" type="text" placeholder="输入色值">
                        </div>
                        <div class="color-choose">
                            <input id="js_font_plug" type="text">
                        </div>
                        <div class="question">
                            <img src="images/question.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="chapter-edit-form">
                    <h3 class="name">选择描边颜色：</h3>
                    <div id="js_border_row" class="content">
                        <ul class="color-list">
                            <li class="js_color_box color-box" data-color='c88c88'></li>
                            <li class="js_color_box color-box" data-color='221221'></li>
                            <li class="js_color_box color-box" data-color='bbabba'></li>
                            <li class="js_color_box color-box" data-color='c37622'></li>
                            <li class="js_color_box color-box" data-color='f22341'></li>
                            <li class="js_color_box color-box" data-color='cddcdd'></li>
                            <li class="js_color_box color-box" data-color='ffffff'></li>
                        </ul>
                        <div class="color-edit">
                            <label for="js_border_input">#</label>
                            <input id="js_border_input" type="text" placeholder="输入色值">
                        </div>
                        <div class="color-choose">
                            <input id="js_border_plug" type="text">
                        </div>
                        <div class="question">
                            <img src="images/question.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="chapter-edit-form">
                    <div class="half-content">
                        <h3 class="name">字体大小：</h3>
                        <div class="content">
                            <input id="js_font_size" class="small-input" type="text" value="14">
                        </div>
                    </div>
                    <div class="half-content">
                        <h3 class="name">描边大小：</h3>
                        <div class="content">
                            <input id="js_border_size" class="small-input" type="text" value="2">
                        </div>
                    </div>
                </div>
                <div class="chapter-edit-form">
                    <h3 class="name">看点位置：</h3>
                    <div id="js_position" class="content">
                        <div class="input-radio">
                            <input id="position_left" type="radio" name="position" value="0" checked>
                            <label for="position_left">靠左</label>
                        </div>
                        <div class="input-radio">
                            <input id="position_center" type="radio" name="position" value="1">
                            <label for="position_center">居中</label>
                        </div>
                        <div class="input-radio">
                            <input id="position_right" type="radio" name="position" value="2">
                            <label for="position_right">靠右</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chapter-edit-block">
                <h2 class="chapter-edit-title">章节图</h2>
                <div class="chapter-edit-form">
                    <h3 class="name">上传章节图：</h3>
                    <div class="content">
                        <div class="upload-box">
                            <div id="js_upload_close" class="upload-box-close"></div>
                            <!-- <div id="js_upload_file" class="upload-box-file">
                                <input type="file">
                            </div> -->
                            <div id="js_upload_img" class="upload-box-img">
                                <img src="" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chapter-edit-hint">图片需小于500K,比例为16:8,仅支持jpg,jpeg,png,gif扩展名</div>
            </div>
            <div class="chapter-edit-block">
                <div class="chapter-btn-group">
                    <div id="js_preview_btn" class="chapter-btn chapter-btn-white">预览</div>
                    <div id="js_submit_btn" class="chapter-btn chapter-btn-blue">提交</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="js_preview" class="preview-modal-bg">
    <div class="preview-modal">
        <div class="preview-head">
            预览
            <span id="js_preview_close" class="preview-close"></span>
        </div>
        <div class="preview-content">
            <div class="preview-chapter">
                <img id="js_preview_img" class="preview-chapter-img" src="" alt="">
                <p id="js_preview_text" class="preview-chapter-text"></p>
            </div>
        </div>
    </div>
</div>

<!-- clip js依赖 -->
<script type="text/javascript" src="plug/comic-clip/plug/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="plug/comic-clip/plug/bootstrap.js"></script>
<script type="text/javascript" src="plug/comic-clip/plug/cropper.js"></script>
<!--阿里签名相关-->
<script type="text/javascript" src="plug/comic-clip/plug/crypto/crypto/crypto.js"></script>
<script type="text/javascript" src="plug/comic-clip/plug/crypto/hmac/hmac.js"></script>
<script type="text/javascript" src="plug/comic-clip/plug/crypto/sha1/sha1.js"></script>
<script type="text/javascript" src="plug/comic-clip/plug/base64.js"></script>
<!--七牛签名相关-->
<script type="text/javascript" src="plug/comic-clip/uploader/index.js"></script>
<script src="plug/comic-clip/index.js"></script>
<!-- clip js依赖 END -->
<!-- colorpicker js依赖 -->
<script src="plug/spectrum/spectrum.min.js"></script>
<!-- colorpicker js依赖 END -->
<!-- 页面js -->
<script>
    window.default_color = {
        'font': '66ffcc',
        'border': '690000'
    }
</script>
<script src="js/index.js"></script>
<!-- 页面js END -->
</body>
</html>